<template>
  <div class="user-edit all-height">
    <!-- Drawer抽屉 -->
    <div :style="{ maxHeight: maxHeight }" class="drawer-content">
      <div :style="{ maxHeight: maxHeight }" class="drawer-content all-height">
        <div class="drawer-header">
          <div style="margin-right: 16px" v-show="type == '2'">添加区</div>
          <div style="margin-right: 16px" v-show="type != '2'">编辑区</div>
          <!-- <Avatar :src="form.avatar" size="large" v-show="type != '2'"/> -->
        </div>
        <Form ref="form" :model="form" :rules="formValidate" label-position="left" :label-width="85" class="marginForm">
          <FormItem label="单位名称" prop="name">
            <Input type="text" v-model="form.name" clearable placeholder="请输入单位名称" style="width: 100%" />
          </FormItem>
          <FormItem label="经营状态" prop="status">
            <Select v-model="form.status" clearable placeholder="请选择经营状态"
                    style="width: 100%">
              <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="统一社会信用代码" prop="code" >
            <Input type="text" v-model="form.code" clearable placeholder="请输入统一社会信用代码" style="width: 100%" />
          </FormItem>
          <FormItem label="单位性质" prop="nature" >
            <Select v-model="form.nature" clearable style="width: 100%"  placeholder="请选择单位性质">
              <Option v-for="(item,index) in unitNatureDicts" :value="item.value" :key="index">{{ item.title }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="单位行业" prop="industry">
            <Select v-model="form.industry" clearable placeholder="请选择单位行业"
                    style="width: 100%">
              <Option v-for="(item,index) in unitIndustryDicts" :value="item.value" :key="index">{{ item.title }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="单位联系人">
            <Input type="text" v-model="form.contactPerson" clearable placeholder="请输入单位联系人" style="width: 100%" />
          </FormItem>
          <FormItem label="联系电话" >
            <Input type="text" v-model="form.contactPhone" clearable placeholder="请输入单位名称" style="width: 100%" />
          </FormItem>
          <FormItem label="单位所在地" >
            <!--<Cascader :data="cityList"  v-model="form.location" clearable placeholder="请选择单位所在地" style="width: 100%" />-->
            <el-cascader v-model="form.address" :options="cityList"  @change="handleChange" style="width: 100%"></el-cascader>
          </FormItem>
          <FormItem label="详细地址" >
            <Input type="text" v-model="form.location" clearable placeholder="请输入单位详细地址" style="width: 100%" />
          </FormItem>
        </Form>
      </div>
      <div class="drawer-footer br" >
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
        <Button @click="cancel">取消</Button>
      </div>
    </div>
  </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import {getAreaDataApi} from '@/api/bys/index' 
export default {
  name: 'addEdit',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    statusList:{
      type: Array,
      default: ()=>{
        return []
      }
    },
    unitNatureDicts:{
      type: Array,
      default: ()=>{
        return []
      }
    },
    unitIndustryDicts:{
      type: Array,
      default: ()=>{
        return []
      }
    },
  },
  data() {
    return {
      loading: false,
      title: '',
      submitLoading: false,
      maxHeight: 510,
      form: {
        // 添加或编辑表单对象初始化数据
        "address": "",
        "code": "",
        "contactPerson": "",
        "contactPhone": "",
        "id": "",
        "industry": "",
        "location": "",
        "name": "",
        "nature": "",
        "status": "",
      },
      // 表单验证规则
      formValidate: {
        name: [
          { required: true, message: '请输入单位名称', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择经营状态', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入单位统一社会信用代码', trigger: 'blur' }
        ],
        nature: [
          { required: true, message: '请选择单位性质', trigger: 'change' }
        ],
        industry: [
          { required: true, message: '请选择单位行业', trigger: 'change' }
        ],
      },
      cityList:[]
    };
  },
  methods: {
    provincialData (){
      getAreaDataApi().then(res=>{
        console.log(res,22);
        let result = []
        if (res.code ==200){
          result= res.result;
          result.map(item=>{
            item.value = item.code
            item.label = item.name
            if (item.children){
              item.children.map(e=>{
                e.value = e.code
                e.label = e.name
                if (e.children){
                  e.children.map(_e=>{
                    _e.value = _e.code
                    _e.label = _e.name
                    delete _e.children
                  })
                }
              })
            }
          })
          this.cityList=result
        }
      })
    },
    handleChange(e){},
    init(type,data) {
      this.type =type
      if (data){
        this.form = {
          ...data
        }
      }else {
        this.form={
          "address": "",
          "code": "",
          "contactPerson": "",
          "contactPhone": "",
          "id": "",
          "industry": "",
          "location": "",
          "name": "",
          "nature": "",
          "status": "",
        }
      }
    },
    submit() {
      console.log( this.form);
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form ,this.type);
        }
      });
    },
    cancel(){
      this.$emit('cancel' );
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == '1') {
        this.title = '编辑';
        this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
      } else if (this.type == '2') {
        this.title = '添加';
        this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
      } else {
        this.title = '详细信息';
        this.maxHeight = '100%';
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type == '0' || this.type == '1') {
        // 回显数据处理
        this.form = this.data;
      } else {
        // 添加
        delete this.form.id;
      }
      this.visible = value;
    }
  },
  mounted() {
    this.provincialData();
  }
};
</script>

<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/drawer-common.less";
.drawer-footer {
  z-index: 10;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: left;
  background: #fff;
}

.drawer-content {
  overflow: auto;
}

.drawer-content::-webkit-scrollbar {
  display: none;
}

.drawer-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.drawer-title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  display: block;
  margin-bottom: 16px;
}
</style>
